<template>
    <div class="box">
        <h3>路由懒加载和路由模块分解</h3>
        <p>路由模块分解</p>
        <pre>
            将routes路由表已独立配置文件的方式进行定义，通过导出的路由配置数组，在createRouter的配置选中进行组合。
            routes.js
                import DefaultPage          from "@/index/views/DefaultPage.vue"
                export default [
                    { 
                        path: "/default", 
                        component: DefaultPage, 
                    }
                ]
            index.js
                import { createRouter,createWebHistory } from "vue-router";
                import routes from "./routes.js";
                const router =  createRouter({
                    history:createWebHistory(process.env.BASE_URL),
                    // routes:routes,
                    routes:[
                        ...routes,
                    ]
                })
                export default router;    
        </pre>
        <p>路由懒加载:首屏加载优化</p>
        <pre>
            vue-router 模块完成的路由组件定义，在程序编译时，所有的路由组件默认都会被统一编译到 index.js|app.js 文件中;
            vue-router 模块定义的路由组件如果使用了 懒加载模式，完成组件定义，该组件的相关代码会生成一个独立的 js 文件，在路由访问时被加载;
                => 减小项目首次加载时 总和js index.js|app.js 的文件大小，提示首次的页面渲染速度
            路由懒加载定义语法
                { 
                    component: function(){
                        return import("模块路径")
                    }
                }
                { 
                    component: ()=>import("模块路径")
                }
            + 路由模块提供一个内置的模块加载方法 import(/* webpackChunkName: "自定义名称" */"模块地址") ，该方法一调用直接会加载模块
            + 可以通过为 component 取值方法调用的方式，完成加载延迟
            + import方法的调用，可以在模块地址参数前增减一个特殊多行注释用于描述打包规则
                => 指定打包的文件名称
                => 相同名称的路由组件会被打包成一个文件
        </pre>

    </div>
</template>

<script setup>

</script>

<style lang="scss" scoped>

</style>